<template>
  <div class="dialogContainer">
    <img v-if="props.status === AIStatusEnum.loading" class="avator" src="../assets/loading.gif" />
    <img v-else class="avator" src="../assets/ai-avator.gif" />
    <div class="content">
      <div class="contentText">
        <div v-html="showContent"></div>
        <!-- {{ props.content }} -->
        <span v-if="props.status === AIStatusEnum.loading">...</span>
      </div>
      <div v-if="props.status === AIStatusEnum.success" class="contentSuffix">
        <div class="prompt">AI生成仅供参考</div>
        <div class="buttonGroup">
          <div
            class="reGen"
            @click="chatBorStore.reGenerate(props.index, props.handleScrollBottom)"
          >
            <img src="../assets/regenerate.png" />
            重新生成
          </div>
          <div class="copy" @click="chatBorStore.copyToClipboard(props.index)">
            <img src="../assets/copy.png" />
            复制
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { AIStatusEnum } from '../types.d'
import { useChatBotStore } from '../chat-bot-store'
import markdownIt from 'markdown-it'

const chatBorStore = useChatBotStore()

const showContent = computed(() => {
  const md = new markdownIt({
    //    highlight: function (str, lang) {
    //      if (lang && hljs.getLanguage(lang)) {
    //        return hljs.highlight(str, { language: lang }).value;
    //      }
    //      return ''; // 使用默认的 Markdown 格式显示代码块，如果无法识别语言
    //    },
  })
  return md.render(props.content)
})

const props = defineProps({
  index: Number,
  content: String,
  status: AIStatusEnum,
  handleScrollBottom: {
    type: Function,
    default: () => {}
  }
})
</script>

<style lang="less" scoped>
.dialogContainer {
  display: flex;
  margin-bottom: 20px;

  .avator {
    width: 58px;
    height: 58px;
    margin-left: 2px;
    transform: scale(0.75);
  }

  .content {
    box-sizing: border-box;
    max-width: calc(100% - 120px);
    padding-bottom: 0;
    border-radius: 8px 8px 8px 8px;
    background: white;

    .contentText {
      padding: 16px;
    }

    .contentSuffix {
      border-top: 1px solid #e5e6eb;
      background: white;
      border-radius: 0 0 8px 8px;
      padding: 8px 16px;
      display: flex;
      justify-content: space-between;

      .prompt {
        font-size: 12px;
        font-weight: 400;
        color: #86909c;
      }

      .buttonGroup {
        display: flex;
        align-items: center;

        .reGen {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 400;
          color: #4e5969;
          margin-right: 6px;

          &:hover {
            cursor: pointer;
          }
        }

        .copy {
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 400;
          color: #4e5969;

          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
